<template>
<!--    -->
    <el-menu
            :style="{ width: !isCollapse ? '230px':'64px'}"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="aside-container"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            default-active="1"
    >

        <!-- 标题 -->
        <p class="logo-lg"> {{ isCollapse ? 'DIDI':'DIDI陪诊' }} </p>
        <!-- 版本号 -->
        <p class="version-font"> v1.0.2 </p>
        <TreeMenu :menuData="menuData"/>

    </el-menu>
</template>

<script setup>
    import TreeMenu from "./treeMenu.vue";
    import { useRouter } from 'vue-router'
    import { reactive,computed } from 'vue'
    import { useStore } from 'vuex'

    const store = useStore();
    // 菜单是否展开
    const isCollapse = computed(() => store.state.menu.isCollapse);

    const active = computed(() => store.state.menu.menuActive);

    const router = useRouter();

    // 写死
    const menuData = reactive(router.options.routes[0].children);
    //const menuData = computed(()=> store.state.menu.routerList);

    const handleOpen = () => {

    }

    const handleClose = () => {

    }
</script>

<style lang="less" scoped>
.aside-container{
    height: 100%;
    .logo-lg{
        font-size: 20px;
        text-align: center;
        line-height: 50px;
        color: #ffffff;
    }
    .version-font{
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        color: #ffffff;
    }
}
</style>
